<template>
  <div class="profile">
    <nav-bar />
    <van-skeleton title :row="20" :loading="skeletonLoading">
      <div class="main">
        <h3 style="text-align: center">基本信息修改</h3>
        <van-form @submit="onUpdateUser">
          <van-cell-group inset>
            <van-field
              v-model="user.name"
              name="name"
              label="用户名"
              placeholder="请输入用户名"
              :rules="formRule.name"
            />
            <van-field
              v-model="user.wechat"
              name="wechat"
              label="微信"
              placeholder="请输入微信"
            />
            <van-field
              v-model="user.qq"
              name="qq"
              label="QQ"
              placeholder="请输入QQ"
            />
            <van-field
              v-model="user.phone"
              name="phone"
              label="电话号码"
              placeholder="请输入电话号码"
            />
          </van-cell-group>
          <div class="btn">
            <van-button round block type="primary" native-type="submit">
              提交
            </van-button>
          </div>
        </van-form>
        <h3 style="text-align: center">密码修改</h3>
        <van-form @submit="onChangePassword" ref="formRef">
          <van-cell-group inset>
            <van-field
              v-model="mail"
              name="邮箱"
              label="邮箱"
              placeholder="邮箱"
              disabled
              :rules="formRule.mail"
            />
            <van-field
              v-model="code"
              name="验证码"
              label="验证码"
              placeholder="验证码"
            >
              <template #button>
                <van-count-down
                  v-if="isShowCountDown"
                  :time="60000"
                  format="ss"
                  @finish="onCountDownFinish"
                />
                <van-button
                  v-else
                  size="small"
                  type="primary"
                  @click="onSendMail"
                  >发送验证码</van-button
                >
              </template>
            </van-field>
            <van-field
              v-model="password"
              name="password"
              label="密码"
              placeholder="请输入密码"
              type="password"
            />
          </van-cell-group>
          <div class="btn">
            <van-button round block type="primary" native-type="submit">
              提交
            </van-button>
          </div>
        </van-form>
      </div>
    </van-skeleton>
  </div>
</template>

<script setup lang="ts">
import { FormInstance, Notify } from 'vant'
import NavBar from '../../../components/nav-bar.vue'
import { loadUser } from '../../../utils/load-user'
import { checkMailCode, sendMail } from '../../../service/mail'
import { updateUserDetail } from '../../../service/user'
import { IUserDetailUpdate } from '../../../service/user/types'
import { useUserStore } from '../../../store/user'
import { formRule } from '../../../utils/form-rule'
import { storeToRefs } from 'pinia'

const user = reactive<IUserDetailUpdate>({
  name: '',
  wechat: '',
  phone: '',
  qq: ''
})
const code = ref<string>('')
const isShowCountDown = ref<boolean>(false)
const mail = ref<string>('')
const password = ref<string>('')
const formRef = ref<FormInstance>()
const userStore = useUserStore()
const { user: currentUser } = storeToRefs(userStore)
const skeletonLoading = ref<boolean>(true)

const onChangePassword = async () => {
  const data = Object.assign(user, password.value)
  const res = await checkMailCode(mail.value, code.value)
  if (res) {
    if (!currentUser.value?.id) return
    await updateUserDetail(currentUser.value.id, data)
    Notify({
      message: '修改成功',
      type: 'success'
    })
  }
}
const onSendMail = async () => {
  isShowCountDown.value = true
  await sendMail(mail.value)
}
const onCountDownFinish = () => {
  isShowCountDown.value = false
}
const onUpdateUser = async () => {
  if (!currentUser.value) return
  await updateUserDetail(currentUser.value.id, user)
  currentUser.value.name = user.name
  Notify({
    message: '修改成功',
    type: 'success'
  })
}
const loadUserDetail = () => {
  if (!currentUser.value) return
  loadUser(currentUser.value?.id)
    .then((res) => {
      user.name = res.name
      user.phone = res.phone
      user.qq = res.qq
      user.wechat = res.wechat
      mail.value = res.mail
    })
    .then(() => {
      skeletonLoading.value = false
    })
}

onMounted(() => {
  loadUserDetail()
})
</script>

<style lang="scss" scoped>
.profile {
  .main {
    margin-top: 30px;
    .btn {
      margin: 15px;
    }
  }
}
</style>
